<template>
  <div style="display: flex;justify-content: space-between;padding: 0 0.3rem;margin-top: 0.3rem">
    <span>发现好歌单</span>
    <van-button round plain hairline type="primary" size="small">查看更多</van-button>
  </div>
  <div style="height: 250px;margin-top: 0.2rem">
    <van-swipe :loop="false" :width="150" class="music-swiper" :show-indicators="false">
      <van-swipe-item v-for="(item,index) in musicList" :key="index" class="music-swiper-item">
        <router-link :to="{path:'/itemmusic',query:{id:item.id}}">
          <img :src="item.picUrl"/>
          <van-icon name="play-circle"/>
          <span>{{ changePlayCount(item.playCount) }}</span>
          <span>{{ item.name }}</span>
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import {getMusicList} from "../../api/home";

export default {
  name: "MusicList",
  data() {
    return {
      musicList: []
    }
  },
  mounted() {
    this.getGeDan()
  },
  methods: {
    // 获取发现歌单列表
    async getGeDan() {
      let res = await getMusicList()
      // console.log(res)
      if (res.data.code == 200) {
        this.musicList = res.data.result
      }
    },
    // 转换播放量的格式
    changePlayCount(params) {
      if (params >= 100000000) {
        return (params / 100000000).toFixed(2) + '亿'
      } else if (params >= 10000) {
        return (params / 10000).toFixed(2) + '万'
      }
    }
  },
}
</script>

<style scoped>
.music-swiper {
  height: 100%;
}

.music-swiper img {
  height: 3rem;
  /*width: 100%;*/
  border-radius: 0.3rem;
}

.music-swiper-item {
  margin: 0 0.2rem;
}

</style>